<template>
  <div>
    <div style="margin: 5px;">
      <el-button type="primary" @click="$router.push('/ShangPin')">返回</el-button>
      <el-button type="primary" @click="add">添加申请</el-button>
    </div>
    <el-tabs v-model="activeTab">
      <el-tab-pane label="用户未处理申请" name="pending">
        <el-table :data="pendingApplications" border>
          <el-table-column label="申请记录ID" prop="id"></el-table-column>
          <el-table-column label="商品ID" prop="goodsId"></el-table-column>
          <el-table-column label="申请数量" prop="number"></el-table-column>
          <el-table-column label="用途" prop="purpose"></el-table-column>
          <el-table-column label="用户名称" prop="userName"></el-table-column>
          <el-table-column label="商品名称" prop="goodsName"></el-table-column>
          <el-table-column label="操作" width="120">

            <template slot-scope="scope">
              <el-button @click="handleEdit(scope.row)" type="text" size="small">审批</el-button>
              <el-button @click="handleEdit1(scope.row)" type="text" size="small" style="margin-left: 5px;">编辑</el-button>
              <el-popconfirm title="确定删除吗?" @confirm="handleDelete(scope.row)" style="margin-left: 5px;">
             <template #reference>
               <el-button
                 size="small"
                 type="text"
               >删除</el-button>
             </template>
           </el-popconfirm>
          </template>

          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="用户已处理申请" name="processed">
        <el-table :data="processedApplications" border>
          <el-table-column label="处理记录ID" prop="id"></el-table-column>
          <el-table-column label="申请数量" prop="number"></el-table-column>
          <el-table-column label="商品名称" prop="goodsName"></el-table-column>
          <el-table-column label="用途" prop="purpose"></el-table-column>
          <el-table-column label="备注" prop="remark"></el-table-column>
          <el-table-column label="用户名称" prop="userName"></el-table-column>
          <el-table-column label="处理结果" prop="result"></el-table-column>
          <el-table-column label="操作员" prop="operator"></el-table-column>

          
          <el-table-column label="操作" width="120">

          <template slot-scope="scope">   
           <el-popconfirm title="确定撤销吗?" @confirm="handleView(scope.row)">
             <template #reference>
               <el-button
                 size="small"
                 type="text"
               >撤销</el-button>
             </template>
           </el-popconfirm>
          </template>

            <!-- <template slot-scope="scope">
              <el-button @click="handleView(scope.row)" type="text" size="small">撤销</el-button>
            </template> -->
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <!-- 仓库审批权限申请管理 -->
      <el-tab-pane label="仓库审批权限未处理申请" name="pending1">
        <el-table :data="pendingApplications1" border>
          <el-table-column label="申请记录ID" prop="id"></el-table-column>
          <el-table-column label="申请数量" prop="number"></el-table-column>
          <el-table-column label="用途" prop="purpose"></el-table-column>
          <el-table-column label="用户名称" prop="userName"></el-table-column>
          <el-table-column label="商品名称" prop="goodsName"></el-table-column>
          <el-table-column label="操作" width="120">

            <template slot-scope="scope">
              <el-button @click="handleEdit(scope.row)" type="text" size="small">审批</el-button>
              <el-popconfirm title="确定删除吗?" @confirm="handleDelete(scope.row)" style="margin-left: 5px;">
             <template #reference>
               <el-button
                 size="small"
                 type="text"
               >删除</el-button>
             </template>
           </el-popconfirm>
          </template>

          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="仓库审批权限已处理申请" name="processed1">
        <el-table :data="processedApplications1" border>
          <el-table-column label="处理记录ID" prop="id"></el-table-column>
          <el-table-column label="申请数量" prop="number"></el-table-column>
          <el-table-column label="商品名称" prop="goodsName"></el-table-column>
          <el-table-column label="用途" prop="purpose"></el-table-column>
          <el-table-column label="备注" prop="remark"></el-table-column>
          <el-table-column label="用户名称" prop="userName"></el-table-column>
          <el-table-column label="处理结果" prop="result"></el-table-column>
          <el-table-column label="操作员" prop="operator"></el-table-column>

          
          <el-table-column label="操作" width="120">

          <template slot-scope="scope">   
           <el-popconfirm title="确定撤销吗?" @confirm="handleView(scope.row)">
             <template #reference>
               <el-button
                 size="small"
                 type="text"
               >撤销</el-button>
             </template>
           </el-popconfirm>
          </template>

            <!-- <template slot-scope="scope">
              <el-button @click="handleView(scope.row)" type="text" size="small">撤销</el-button>
            </template> -->
          </el-table-column>
        </el-table>
      </el-tab-pane>


    </el-tabs>

    <!-- 审批弹出的模态框 -->
    <el-dialog
       title="提示"
       :visible.sync="centerDialogVisible"
       :before-close="handleClose"
       center>
       <el-form ref="form" :rules="rules" :model="form" label-width="120px">
        
         <el-form-item label="商品请求记录ID" prop="requestId" style="display: none;">
          <el-col :span="20">
           <el-input v-model="form.requestId"></el-input>
          </el-col>
         </el-form-item>
 
         <el-form-item label="备注" prop="remark">
          <el-col :span="20">
           <el-input v-model="form.remark"></el-input>
          </el-col>
         </el-form-item>
 
         <el-form-item label="处理结果" prop="result">
      
            <el-select
               v-model="form.result">
              <el-option value="通过">通过</el-option>
              <el-option value="未通过">未通过</el-option>
            </el-select>
  
         </el-form-item>
 
       </el-form>
 
       <span slot="footer" class="dialog-footer">
         <el-button @click="centerDialogVisible = false">取消</el-button>
         <el-button type="primary" @click="save">确定</el-button>
       </span>
     </el-dialog>


     <!-- 修改和增加申请时弹出的模态框 -->
     
    <el-dialog
       title="提示"
       :visible.sync="centerDialogVisible1"
       :before-close="handleClose1"
       center>
       <el-form ref="form1" :rules="rules1" :model="form1" label-width="120px">
        
         <el-form-item label="商品请求记录ID" prop="id" style="display: none;">
          <el-col :span="20">
           <el-input v-model="form1.id"></el-input>
          </el-col>
         </el-form-item>
 
         <el-form-item label="商品ID" prop="goodsId">
          <el-col :span="20">
           <el-input v-model="form1.goodsId"></el-input>
          </el-col>
         </el-form-item>

         <el-form-item label="申请数量" prop="number">
          <el-col :span="20">
           <el-input v-model="form1.number"></el-input>
          </el-col>
         </el-form-item>

         <el-form-item label="用途" prop="purpose">
          <el-col :span="20">
           <el-input v-model="form1.purpose"></el-input>
          </el-col>
         </el-form-item>

         
 
       </el-form>
 
       <span slot="footer" class="dialog-footer">
         <el-button @click="centerDialogVisible1 = false">取消</el-button>
         <el-button type="primary" @click="save1">确定</el-button>
       </span>
     </el-dialog>

  </div>
</template>

<script>
export default {
  data(){
    return{
      activeTab: 'pending', // 默认显示未处理申请
      pendingApplications: [], // 用户未处理申请数据
      processedApplications: [], // 用户已处理申请数据
      pendingApplications1: [], // 仓库审批未处理申请数据
      processedApplications1: [], // 仓库审批已处理申请数据

      centerDialogVisible: false,
      centerDialogVisible1: false,
      form:{
        requestId:1,
        remark:'',
        result:''
      },
      form1:{
        id:0,
        goodsId:'',
        number:'',
        purpose:''
      },
      rules:{
        remark:[
           { required: true, message: '请输入备注', trigger: 'blur' },
           ],
        result:[
           { required: true, message: '请输入处理结果', trigger: 'blur' },
           ],
      },
      rules1:{
        goodsId:[
           { required: true, message: '请输入商品ID', trigger: 'blur' },
           ],
        number:[
           { required: true, message: '请输入申请数量', trigger: 'blur' },
           ],
        purpose:[
           { required: true, message: '请输入用途', trigger: 'blur' },
           ],
      }
    }
  },
  methods:{
    // 获取仓库审批权限已处理和未处理的申请数据
    fetchData1(){
      this.$axios.get("/api/request/warehouse/list/unprocessed").then(res =>{
        console.log(1111);
        console.log(res);
        if(res.data.code == '200'){
          this.pendingApplications1 = res.data.data
        }
      })

      this.$axios.get("/api/request/warehouse/list/processed").then(res =>{
        if(res.data.code == '200'){
          this.processedApplications1 = res.data.data
        }
      })
    },
    // 获取用户已处理和未处理的申请数据
    fetchData(){
      this.$axios.get("/api/request/user/list/unprocessed").then(res =>{
        console.log('===========');
        console.log(res);
        if(res.data.code == '200'){
          this.pendingApplications = res.data.data
        }
      })
      this.$axios.get("/api/request/user/list/processed").then(res =>{
        if(res.data.code == '200'){
          this.processedApplications = res.data.data
        }
      })
    },
    // 审批申请时弹出模态框
    handleEdit(row){
      console.log(111);
      console.log(row);
      this.centerDialogVisible = true
      this.$nextTick(() =>{
        this.form.requestId = row.id
      })
    },
    // 编辑时弹出模态框
    handleEdit1(row){
      this.centerDialogVisible1 = true
      this.$nextTick(() =>{
        this.form1.id = row.id
        this.form1.goodsId = row.goodsId
        this.form1.number = row.number
        this.form1.purpose = row.purpose
      })
    },
     // 重置表单
     resetForm(){
       this.$refs.form1.resetFields();
     },
    // 新增时弹出模态框
    add(){
       this.centerDialogVisible1 = true
       this.$nextTick(() => {
         this.resetForm();
       })
     },
    // 新增或者修改申请
    save1(){
        this.$refs.form1.validate((valid) => {
           if (valid) {
             if(this.form1.id){
               // 修改
               this.doMod()
             }else{
               // 新增
               this.doSave();
             }
      
           } else {
             console.log('error submit!!');
             return false;
           }
         });
 
    },
    // 新增
    doSave(){
      this.$axios.post("/api/request/add",this.form1).then(res =>{
        if(res.data.code == '200'){
          this.$message({
            type:"success",
            message:"新增成功"
          })
          this.centerDialogVisible1 = false
          this.fetchData()
        }else{
          this.$message({
            type:"error",
            message:"新增失败"
          })
        }
      })
    },
    // 修改
    doMod(){
      this.$axios.post("/api/request/update",{
        goodsId:this.form1.goodsId,
        id:this.form1.id,
        number:this.form1.number,
        purpose:this.form1.purpose,
        userId:0
      }).then((res) =>{
        if(res.data.code == '200'){
          this.$message({
            type:"success",
            message:"修改成功"
          })
         this.centerDialogVisible1 = false
         this.fetchData()
        }else{
          this.$message({
            type:"error",
            message:"修改失败"
          })
        }
      })
    },
    // 删除未处理的申请
    handleDelete(row){
      this.$axios.delete("/api/request/delete/"+row.id).then(res =>{
        if(res.data.code == '200'){
          this.$message({
            type:"success",
            message:"删除成功"
          })
          this.fetchData()
        }else{
          this.$message({
            type:"error",
            message:"删除失败"
          })
        }
      })
    },
    // 撤销申请
    handleView(row){
      console.log(row);
      this.$axios.post("/api/processing/revoke/" + row.id).then(res =>{
        if(res.data.code == '200'){
          this.$message({
            type:"success",
            message:"撤销成功"
          })
          this.fetchData()
        }else{
          this.$message({
            type:"error",
            message:"撤销失败"
          })
        }
      })
    },

    // 审批时
    save(){
      this.$axios.post("/api/processing/add",this.form).then((res) =>{
        if(res.data.code == '200'){
          this.$message({
            type: "success",
            message: "已审批"
          })
          this.centerDialogVisible = false
          this.fetchData()
        }else{
          this.$message({
            type: "error",
            message:"审批失败"
          })
        }
      })
    },
    // 关闭审批模态框
    handleClose(done) {
         this.$confirm('确定关闭吗?')
           .then(_ => {
             done();
           })
           .catch(_ => {});
       },
  //  关闭增加和修改模态框
   handleClose1(done) {
         this.$confirm('确定关闭吗?')
           .then(_ => {
             done();
           })
           .catch(_ => {});
       },
  },


  mounted(){
    // 在组件中挂载时获取数据
    this.fetchData()
    this.fetchData1()
  }
}
</script>

<style>

</style>